<script setup>
import {ref} from 'vue'
import {useRouter} from "vue-router";
import {saveForwarder} from "@/api/forwarder.js"
import {ElMessage} from "element-plus";
import {CheckUser} from "@/api/sysuser.js"
//路由实例
const router = useRouter();

//表单引用 声明同名引用
const addForm = ref();
//表单对象
const forwarder=ref({
  account: "",
  password: "",
  name: "",
  contacts: "",
  phone: "",
  email:"",
  transport: "",
  airline: ""});

// 验证规则
const rules = {
  account:[{required: true, message: '请输入用户名', trigger: 'blur'}],
  password:[{required: true, message: '请输入密码', trigger: 'blur'}],
  name: [{required: true, message: '请输入货代公司名称', trigger: 'blur'}]
}
//检查账号是否已经存在
async function chk(){
  if(!forwarder.value.account){
    ElMessage({
      message: "请输入账号",
      type: "warning"
    });
    return;
  }
  //验证账号是否存在
  let res=await CheckUser(forwarder.value.account);
  if(res.code===200){
    if(res.data === "存在"){
      ElMessage({
        message: "账号已经存在",
        type: "warning"
      });
    }
  }
}
//取消
function close(){
  router.push("/forwarder")
}
//保存
async function save(){
  let valid=await addForm.value.validate(()=>{})
  if(!valid){
    return;
  }
  console.log(".>>",valid)
  console.log(forwarder.value)
  //保存
  let res=await saveForwarder(forwarder.value);
  if(res.code===200) {
    ElMessage({
      message: "保存成功",
      type: "success"
    });
    close();
  }
}
</script>

<template>
  <div>
    <el-form :model="forwarder"
             :rules="rules"
             ref="addForm"
             label-width="auto"
             style="max-width: 1000px;
           margin: auto;
           background-color: white;
           padding: 20px;">
      <div style="background-color: #fff;height: 30px;line-height: 30px;border-bottom: solid 1px #ccc;margin-bottom: 10px">基础信息</div>
      <el-row>
        <el-col :span="12">
          <el-form-item label="账号:" prop="account">
            <el-input v-model="forwarder.account" @blur="chk"
                      placeholder="请输入"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="密码:" prop="password">
            <el-input v-model="forwarder.password" @blur="chk"
                      placeholder="请输入"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="货代公司名称:" prop="name">
            <el-input v-model="forwarder.name"
                      placeholder="请输入"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="联系人:">
            <el-input v-model="forwarder.contacts"
                      placeholder="请输入"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="联系电话:">
            <el-input v-model="forwarder.phone"
                      placeholder="请输入"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="邮箱:">
            <el-input v-model="forwarder.email"
                      placeholder="请输入"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="运输方式:">
            <el-input v-model="forwarder.transport"
                      placeholder="请输入"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="擅长航线:">
            <el-input v-model="forwarder.airline"
                      placeholder="请输入"/>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div style="text-align: center;margin: 20px">
      <el-button type="primary" @click="save">保存</el-button>
      <el-button type="info" @click="close">取消</el-button>
    </div>
  </div>
</template>

<style scoped>

</style>
